<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>团队成员</title>
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../stylesheets/header-and-footer.css" />

    <style>
      html {
        height: 100%;
      }

      body {
        min-height: 100%;
        background-color: #fff;
      }

      p {
        font-size: 16px;
        line-height: 26px;
      }

      h1 {
        font-size: 30px;
        line-height: 36px;
        font-weight: bold;
        margin-top: 40px;
      }

      .team-wrapper {
        /* height: 90%; */
        min-height: 70.8%;
        padding: 0 222px 30px 100px;
      }

      .team-wrapper span {
        display: block;
      }

      fieldset {
        display: inline;
        width: 13%;
        /* height: 335px; */
        margin-right: 60px;
        text-align: center;
      }

      .layui-elem-field legend {
        margin-left: 0;
        font-size: 25px;
        font-weight: 500;
      }

      .layui-field-box {
        font-size: 20px;
      }

      .team-wrapper hr {
        width: 92%;
        margin-bottom: 25px;
      }

      .team-wrapper img {
        width: 170px;
        /* height: 200px; */
        margin-bottom: 10px;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        background-position: 50% 0%;
        background-size: cover;
      }

      .mysider {
        display: none;
        position: absolute;
        height: 153px;
        width: 90px;
        /* background-color: pink; */
        left: 91%;
        margin-left: -7px;
        top: 190px !important;
        text-align: center;
        border: 1px solid #505050;
        border-radius: 10px;
      }

      .mysider a {
        display: block;
        padding: 10px 0;
      }

      .mysider a:hover {
        background-color: #73c9e5;
        color: #fff;
      }

      .mysider a:first-child {
        border-radius: 10px 10px 0 0;
      }

      .mysider span {
        /* display: none;
      position: absolute;
      top: 105px; */
        margin-top: 10px;
      }

      .mysider span > a {
        border-radius: 0 0 10px 10px !important;
      }
    </style>
  </head>

  <body>
    <!-- 头部 -->
    <div class="layui-row">
      <!-- logo -->
      <div class="layui-col-md4">
        <header class="">
          <div id="header-container">
            <a href="https://www.spaceclimateobservatory.org/">
              <img
                class="logo"
                src="../images/sco-logo.svg"
                alt="Space Climate Observatory (SCO)"
              />
              <span style="color: #fff; font-size: 1.2em; line-height: 8.2vh"
                >国际气候观测站</span
              >
            </a>
            <a href="http://cge.njtech.edu.cn/">
              <img
                class="logo"
                src="../images/logo.png"
                alt="南京工业大学测绘科学与技术学院"
              />
            </a>
            <!-- <span class="title">江苏省海洋反演平台</span> -->
          </div>
        </header>
      </div>

      <!-- 导航栏 -->
      <div class="layui-col-md7 head-bg">
        <ul class="layui-nav nav-menu" lay-filter="">
          <li class="layui-nav-item">
            <a href="./index.html">首页</a>
          </li>
          <li class="layui-nav-item">
            <a href="./introduction.html">项目概况</a>
          </li>
          <li class="layui-nav-item">
            <a href="./background.html">背景资料</a>
          </li>
          <li class="layui-nav-item">
            <a href="./data.html">成果展示</a>
            <dl class="layui-nav-child">
              <dd><a href="./data.html">数据专栏</a></dd>
              <dd><a href="./model-column/model.html">模型专栏</a></dd>
              <dd><a href="./showdata.html">算法专栏</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item layui-this">
            <a href="./about.html">团队成员</a>
          </li>
          <li class="layui-nav-item">
            <a class="last" href="./contact.html">联系我们</a>
          </li>
        </ul>
      </div>
      <a href="../en-us/about.html">
        <button class="layui-btn layui-btn-primary switch-language">
          English
        </button>
      </a>
    </div>

    <!-- 右侧边栏 -->
    <div class="mysider">
      <a href="#professor">教授</a>
      <a href="#lecturer">讲师</a>
      <a href="#postgraduate">研究生</a>

      <span>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-up"></i>
        </a>
      </span>
    </div>

    <!-- 主体 -->
    <div class="team-wrapper">
      <!-- 教授 -->
      <div class="professor">
        <h1><a name="professor"></a>教授</h1>
        <hr class="layui-bg-black" />
        <div>
          <a href="./memberdetail/zgy.html">
            <fieldset class="layui-elem-field">
              <!-- <legend>张广运</legend> -->
              <div class="layui-field-box">
                张广运
                <!-- <img src="../images/avatar_1.jpg" alt="" /> -->
                <!-- <span>研究方向：</span>
              <p>三维模型纹理映射、三维建模、机器学习</p> -->
              </div>
            </fieldset>
          </a>
        </div>
      </div>
      <!-- 讲师 -->
      <div class="lecturer">
        <h1><a name="lecturer"></a>讲师</h1>
        <hr class="layui-bg-black" />
        <div>
          <a href="./memberdetail/zyf.html">
            <fieldset class="layui-elem-field">
              <!-- <legend>庄齐枫</legend> -->
              <div class="layui-field-box">
                庄齐枫
                <!-- <img src="../images/avatar_1.jpg" alt="" /> -->
                <!-- <span>研究方向：</span>
              <p>三维模型纹理映射</p> -->
              </div>
            </fieldset>
          </a>
          <a href="./memberdetail/lhx.html">
            <fieldset class="layui-elem-field">
              <!-- <legend>李海星</legend> -->
              <div class="layui-field-box">
                李海星
                <!-- <img src="../images/avatar_1.jpg" alt="" /> -->
                <!-- <span>研究方向：</span>
              <p>三维模型纹理映射、三维建模、机器学习</p> -->
              </div>
            </fieldset>
          </a>

          <a href="./memberdetail/ws.html">
            <fieldset class="layui-elem-field">
              <!-- <legend>王帅</legend> -->
              <div class="layui-field-box">
                王帅
                <!-- <img src="../images/avatar_1.jpg" alt="" /> -->
                <!-- <span>研究方向：</span>
              <p>三维模型纹理映射、三维建模、机器学习</p> -->
              </div>
            </fieldset>
          </a>
          <a href="./memberdetail/xdf.html">
            <fieldset class="layui-elem-field">
              <!-- <legend>谢登峰</legend> -->
              <div class="layui-field-box">
                谢登峰
                <!-- <img src="../images/avatar_1.jpg" alt="" /> -->
                <!-- <span>研究方向：</span>
              <p>三维模型纹理映射、三维建模、机器学习</p> -->
              </div>
            </fieldset>
          </a>
          <a href="./memberdetail/zrt.html">
            <fieldset class="layui-elem-field">
              <!-- <legend>张荣庭</legend> -->
              <div class="layui-field-box">
                张荣庭
                <!-- <img src="../images/avatar_1.jpg" alt="" /> -->
                <!-- <span>研究方向：</span>
              <p>三维模型纹理映射、三维建模、机器学习</p> -->
              </div>
            </fieldset>
          </a>
          <a href="">
            <fieldset class="layui-elem-field">
              <!-- <legend>宫金杞</legend> -->
              <div class="layui-field-box">
                宫金杞
                <!-- <img src="../images/avatar_1.jpg" alt="" /> -->
                <!-- <span>研究方向：</span>
              <p>三维模型纹理映射、三维建模、机器学习</p> -->
              </div>
            </fieldset>
          </a>
        </div>
      </div>
      <!-- 研究生 -->
      <div class="postgraduate">
        <h1><a name="postgraduate"></a>研究生</h1>
        <hr class="layui-bg-black" />
        <div>
          <a href="">
            <fieldset class="layui-elem-field">
              <!-- <legend>孟祥瑞</legend> -->
              <div class="layui-field-box">
                孟祥瑞
                <!-- <img src="../images/avatar_1.jpg" alt="" /> -->
                <!-- <span>研究方向：</span>
              <p>三维模型纹理映射</p> -->
              </div>
            </fieldset>
          </a>
          <a href="">
            <fieldset class="layui-elem-field">
              <!-- <legend>蒋钰辉</legend> -->
              <div class="layui-field-box">
                蒋钰辉
                <!-- <img src="../images/avatar_1.jpg" alt="" /> -->
                <!-- <span>研究方向：</span>
              <p>三维模型纹理映射、三维建模、机器学习</p> -->
              </div>
            </fieldset>
          </a>
          <a href="">
            <fieldset class="layui-elem-field">
              <!-- <legend>徐金锋</legend> -->
              <div class="layui-field-box">
                徐金锋
                <!-- <img src="../images/avatar_1.jpg" alt="" /> -->
                <!-- <span>研究方向：</span>
              <p>三维模型纹理映射、三维建模、机器学习</p> -->
              </div>
            </fieldset>
          </a>
        </div>
      </div>
    </div>

    <!-- 尾部 -->
    <footer>
      <div id="footer-container">
        <ul class="footer-info-ls">
          <li>
            <span class="layui-breadcrumb" lay-separator="|">
              <a href="./index.html">首页</a>
              <a href=".introduction.html">项目概况</a>
              <a href="./background.html">背景资料</a>
              <a href="./data.html">成果展示</a>
              <a href="./about.html">团队成员</a>
              <a href="./contact.html">联系我们</a>
            </span>
          </li>
          <li>
            地址：江苏省南京市浦口区浦珠南路30号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮编：211800&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电话：025-58139464
          </li>
          <li>
            <a href="http://cge.njtech.edu.cn/"
              >版权所有 © 南京工业大学测绘科学与技术学院</a
            >
          </li>
          <li></li>
        </ul>
      </div>
    </footer>

    <script src="../layui/layui.js" type="application/javascript"></script>
    <script>
      layui.use('element', function () {
        var element = layui.element
      })

      //右侧边栏
      var sider = document.querySelector('.mysider')
      var header = document.querySelector('.layui-row')
      var main = document.querySelector('.team-wrapper')
      var span = document.querySelector('.mysider span')

      var headerTop = header.offsetTop
      var siderTop = sider.offsetTop - headerTop
      var mainTop = main.offsetTop

      document.addEventListener('scroll', function () {
        if (window.pageYOffset >= headerTop) {
          sider.style.position = 'fixed'
          sider.style.top = siderTop + 'px'
        } else {
          sider.style.position = 'absolute'
          sider.style.top = '300px'
        }

        // if (window.pageYOffset >= mainTop) {
        //   span.style.display = 'block';
        // } else {
        //   span.style.display = 'none';
        // }
      })

      var a = span.querySelector('a')
      a.addEventListener('click', function () {
        window.scroll(0, 0)
      })
    </script>
  </body>
</html>
